<template>
	<div class="j-form" v-if="rule.length > 0">
		<form-create :rule="rule" v-model="val" v-model:api="fApi" :option="defaultOption" :style="{ width: width ? width + 'px' : '100%' }" />
	</div>
	<el-skeleton v-else />
</template>

<script>
import tool from "@/utils/tool";
export default {
  props: {
    modelValue: { type: Object, default: () => {} },
    options: { type: Object, default: () => {} },
    rule: { type: Array, default: () => [] },
    inline: { type: Boolean, default: false },
    size: { type: String, default: "default" },
    labelWidth: { type: String, default: "80px" },
    width: { type: [String, Number], default: "" },
    editable: { type: Boolean, default: true },
    submitBtn: { type: Boolean, default: false },
    resetBtn: { type: Boolean, default: false },
  },
  emits: ['update:modelValue','update:api', 'mounted'],
  data () {
    return {
      fApi: {},
      val: this.modelValue,
      defaultOption: {
        submitBtn: this.submitBtn,
        resetBtn: this.resetBtn,
        mounted: (fapi) => {
          this.$emit('update:modelValue', this.val)
          this.$emit('update:api', this.fApi)
          this.$emit('mounted', fapi)
        },
        form: {
          //行内表单模式
          inline: this.inline,
          //表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
          labelPosition: "right",
          //表单域标签的后缀
          labelSuffix: undefined,
          //是否显示必填字段的标签旁边的红色星号
          hideRequiredAsterisk: false,
          //表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
          labelWidth: this.labelWidth,
          //是否显示校验错误信息
          showMessage: false,
          //是否以行内形式展示校验信息
          inlineMessage: false,
          //是否在输入框中显示校验结果反馈图标
          statusIcon: false,
          //是否在 rules 属性改变后立即触发一次验证
          validateOnRuleChange: true,
          //是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
          disabled: !this.editable,
          //用于控制该表单内组件的尺寸 medium / small / mini
          size: this.size,
        },
        info: {
          type: "popover", //提示消息类型,popover,tooltip
        },
      },
    }
  },
  methods: {
    // 提交
    submit (callback) {
      this.fApi.submit((formData) => {
        callback(formData)
      }).catch((err) => {
        for(let i in err) {
          for (let j = 0; j < err[i].length; j++) {
            return tool.err(err[i][j].message)
          }
        }
      })
    },
    // 重置
    reset () {
      if(!tool.xe.isEmpty(this.fApi)) {
        this.fApi.resetFields();
        this.fApi.nextTick(()=>{
          this.fApi.clearValidateState()
        })
      }
    },
  },
  watch: {
    val: {
      handler (val) {
        this.$emit('update:modelValue', val)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
.j-form {
	width: 100%;
}
:deep(.el-divider--horizontal) {
	margin: 5px 0;
}
:deep(.el-form-item) {
	margin-bottom: 8px;
}
:deep(.el-input__inner) {
	background: transparent;
	font-size: 13px;
}
:deep(.el-input__inner::placeholder) {
	font-size: 12px;
}
:deep(.el-input__inner:read-only) {
	color: #01aaee;
}

:deep(.el-form-item__label) {
	font-size: 13px;
	padding: 2px 5px 0 0;
}
</style>